<template>
	<div>
		<ul class="menuUl">
			<li v-for="(item, i) in myTeam" :key="item.id">
				<!-- 公司级菜单 -->
				<div class="menuLiTitle" @click="menuUlClick(item)">
					<!-- <i slot="suffix" class="devicon"></i> -->
					<el-image class="devicon" :src="item.companyLogo?item.companyLogo:item.menuIcon"></el-image>
					<i slot="suffix" class="el-icon el-icon-arrow-down" :class="item.isShow?'isMenuShow':''"></i>
					{{item.labelName}}
				</div>
				<!-- 公司级二级菜单 -->
				<ul class="subordinateMenuUl" v-if="item.children && item.children.length > 0 && item.isShow">
					<!-- 公司级二级菜单标题 -->
					<li v-for="(list, l) in item.children" :key="list.id" class="subordinateMenuUlLi" :class="isSelectId==list.id?'isSelectLi':''">
						<!-- <el-image class="devicon" :src="list.menuIcon"></el-image> -->
						<!-- 二级菜单有子菜单时 -->
						<div v-if="list.children && list.children.length > 0" class="">
							<div class="menuLiTitle" @click="subordinateMenuUlClick(list, i, '1')">
								<el-image class="devicon" :src="list.menuIcon"></el-image>
								<i slot="suffix" class="el-icon el-icon-arrow-down" :class="list.isShow?'isMenuShow':''"></i>
								{{list.labelName}}
							</div>
							<ul class="dubleMenuUl" v-if="list.children && list.children.length > 0 && list.isShow">
								<li v-for="(child, l) in list.children" :key="child.id" class="subordinateMenuUlLi" @click="dubleMenuUlClick(child, item, true, i, l)"
								 :class="isSelectId==child.id?'isSelectLi':''">
									<div class="subordinateMenuUlLiDivChild">
										<el-image class="devicon" :src="child.menuIcon"></el-image>
										{{child.labelName}}
									</div>
								</li>
							</ul>
						</div>
						<!-- 二级菜单无子菜单时 -->
						<div v-else @click="dubleMenuUlClick(list, item, false, i, '')" class="subordinateMenuUlLiDiv">
							<el-image class="devicon" :src="list.menuIcon"></el-image>
							{{list.menuName?list.menuName:list.labelName}}
						</div>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				myTeam: [{
						labelName: '我的团队',
						id: 'myTeam',
						isShow: true,
						menuIcon: require('@/assets/image/icon/wdtd.png'),
						children: [{
								labelName: '创建团队/组织',
								menuUrl: '/myteam/teaminfo/creationteam',
								menuIcon: require('@/assets/image/icon/cjtd.png'),
								id: 11
							},
							{
								labelName: '加入团队/组织',
								menuUrl: '/myteam/teaminfo/jointeam',
								menuIcon: require('@/assets/image/icon/jrtd.png'),
								id: 12
							},
							{
								labelName: '团队邀请',
								menuUrl: '/myteam/teaminfo/teamrequest',
								menuIcon: require('@/assets/image/icon/tdyq.png'),
								id: 13
							}
						]
					},
					// {
					// 	labelName: this.$store.state.company.companyName,
					// 	// labelName: '通讯录管理通讯录管理通讯录管理通讯录管理通讯录管理通讯录管理通讯录管理通讯录管理',
					// 	id: 2,
					// 	isShow: true,
					// 	icon: require('@/assets/image/management/management2.png'),
					// 	children: [{
					// 			labelName: '通讯录管理',
					// 			url: '/await',
					// 			id: 21,
					// 			isShow: false,
					// 			children: [{
					// 					labelName: '成员管理',
					// 					url: '/myteam/teaminfo/member',
					// 					id: 211
					// 				},
					// 				{
					// 					labelName: '部门管理',
					// 					url: '/myteam/teaminfo/department',
					// 					id: 212
					// 				},
					// 				{
					// 					labelName: '邀请成员',
					// 					url: '/myteam/teaminfo/invitation',
					// 					id: 213
					// 				},
					// 				{
					// 					labelName: '管理员设置',
					// 					url: '/myteam/teaminfo/adminsetting',
					// 					id: 214
					// 				}
					// 			]
					// 		},
					// 		{
					// 			labelName: '团队认证',
					// 			url: '/myteam/teaminfo/teamattestation',
					// 			id: 22
					// 		},
					// 		{
					// 			labelName: '个性化管理',
					// 			url: '/await',
					// 			id: 23
					// 		},
					// 		{
					// 			labelName: '信息安全',
					// 			url: '/await',
					// 			id: 24
					// 		}
					// 	]
					// }
				],
				isSelectId: '',
				userId: '',
				breadcrumb: new Map()
				
			}
		},
		created() {
			this.$store.commit('set_navIndex', 1)
			this.$store.commit('set_lowerIsShow', true)
			this.$store.commit('set_lowerIndex', 1)
			// 设置当前左部导航为未选中状态
			this.$store.commit('set_teamNavIndex', '')
		},
		computed: {
			// companyName () {
			// 	return this.$store.state.company.companyName
			// }
			monitor () {
				return this.$store.state.company.companyList
			},
		},
		watch:{
			// companyName (newData) {
			// 	this.setCompanyName(newData)
			// }
			monitor (newData) {
				this.isSelectId = this.$store.state.navState.teamNavIndex
				this.getCompanyList()
			}
		},
		mounted() {
			
			this.userId = this.$store.state.user.userInfo.id
			this.$nextTick(() => {
				this.isSelectId = this.$store.state.navState.teamNavIndex
				this.getCompanyList()
			})
		},
		methods: {
			// setCompanyName(name){
			// 	// 动态设置公司名字
			// 	this.myTeam[1].labelName = name
			// 	// 为避免内置所有页面全部监听公司切换变化，
			// 	// 故而从定向到我的团队列表
			// 	// 折叠除公司以外的菜单
			// 	this.$set(this.myTeam[1].children, 'isShow', false)
			// 	// this.myTeam[1].children.isShow = false
			// },
			menuUlClick(item) {
				// 点击事件--切换点击效果
				item.isShow = !item.isShow
				if (item.id !== 'myTeam' && item.isShow) {
					// 如果是点击的公司,清空map，重新设置company，并转换为字符串存入vuex
					// this.breadcrumb.clear()
					// this.breadcrumb.set('company', item.labelName)
					// let breadcrumbdata = [...this.breadcrumb.values()].join(',')
					// this.$store.commit('set_breadcrumb', breadcrumbdata)
					// console.log(item)
					this.$store.commit('set_companyName', item.labelName)
					this.$store.commit('set_selectCompanyId', item.id)
					this.isSelectId = ''
					// this.$store.commit('set_teamNavIndex', '')
					// console.log(this.$store.state)
					// 点击一个，，其他全部收起
					this.myTeam.filter(l=>{
						if(l.id != item.id && l.id != 'myTeam'){
							l.isShow = false
						}
					})
					// 重新获取按钮权限
					this.$request.get(this.$api.queryWebMenu, {
						userId: this.userId,
						companyId: item.id
					}).then(res => {
						if (res.code == 200) {
							// 按钮权限
							let data = res.data
							sessionStorage.removeItem('buttonJurisdiction')
							try {
								let jurisdiction = []
								data['button'].forEach(v => {
									jurisdiction.push(v.menuName)
								})
								sessionStorage.setItem("buttonJurisdiction", jurisdiction)
							} catch (e) {
								//TODO handle the exception
								throw new Error(e)
							}
						}
					})
					// this.$forceUpdate()
				} else {
					// 如果点击我的团队，直接跳转到团队列表
					this.$router.push(`/myteam/teaminfo/teamlist?t=${new Date().getTime()}`)
				}
			},
			subordinateMenuUlClick(item) {
				// 点击事件--切换点击效果
				item.isShow = !item.isShow
				// console.log(item)
				this.$forceUpdate()
				//-----------------------------------------------------------------------------------
				// if (item.isShow) {
				// 	// 如果子级为展开的状态,删除最后一个map值,设置subordinate,并转换为字符串存入vuex
				// 	this.breadcrumb.delete('duble')
				// 	this.breadcrumb.set('subordinate', item.labelName)
				// 	let breadcrumbdata = [...this.breadcrumb.values()].join(',')
				// 	this.$store.commit('set_breadcrumb', breadcrumbdata)
				// }
			},
			/**
			 * @param {Object} item 当前点击的子类对象
			 * @param {Object} par 当前点击的公司对象
			 * @param {Object} duble 是否有子级对象
			 * @param {Object} i 当前点击的公司对象的index
			 * @param {Object} l 当前点击对象有子级的对象的index，无子级为空
			 */
			dubleMenuUlClick(item, par, duble, i, l) {
				// 记录当前点击的id
				this.isSelectId = item.id
				this.$store.commit('set_teamNavIndex', item.id)
				// 判断是不是点击的我的团队/myteam/teaminfo/kb
					// console.log(item)
					if(item.menuUrl){
						this.$router.push(`/myteam/teaminfo/kb?url=${item.menuUrl}`)
					}
					// this.$router.push(item.menuUrl ? `${item.menuUrl}?t=${new Date().getTime()}` : '404')
				// if (par.id !== 'myTeam') {
				// 	// 判断map有没有company和subordinate，避免直接点击下级无法加载公司名称和子目录名
				// 	if(!this.breadcrumb.get('company')){
				// 		this.breadcrumb.set('company', par.labelName)
				// 	}
				// 	if(!this.breadcrumb.get('subordinate') && duble){
				// 		this.breadcrumb.set('subordinate', par.children[l].labelName)
				// 	}
				// 	// 清空最后一级map,并重新设置，避免点击的没有子级菜单
				// 	this.breadcrumb.delete('duble')
				// 	this.breadcrumb.set(duble ? 'duble' : 'subordinate', item.labelName)
				// }
				// // map转为字符串,存到Vuex
				// let breadcrumbdata = [...this.breadcrumb.values()].join(',')
				// this.$store.commit('set_breadcrumb', breadcrumbdata)
				// // 执行当前点击对象的跳转,如没有url,跳转到404
				// this.$router.push(item.url ? `${item.url}?t=${new Date().getTime()}` : '404')
			},

			getCompanyList() {
				// 获取用户所有公司列表
				this.$request.postForm(this.$api.getCompanyByUser, {
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						this.myTeam.splice(1,)
						res.data.forEach((v=>{
							v.isShow = false
							v.children = []
							this.$request.postForm('/api/addressBook/WebMenu/queryTeamManagementMenu', {
								userId: this.userId,
								companyId: v.id
							}).then(res => {
								if (res.code == 200) {
									// v.children = res.data
									let data = res.data
									data.forEach((l, i)=>{
										if(l.children && l.children.length > 0){
											l.children.filter((c,q)=>{
												if(c.labelName == '创建团队'){
													l.children.splice(q,1)
												}
											})
											l.children.filter((c,q)=>{
												if(c.labelName == '加入团队'){
													l.children.splice(q,1)
												}
											})
										}
									})
									setTimeout(()=>{
										v.children = data
									},300)
								}
							})
							this.myTeam.push(v)
						}))
						// console.log(this.myTeam[1].labelName)
						if(this.myTeam[1]){
							this.$store.commit('set_companyName', this.myTeam[1].labelName)
							this.$store.commit('set_selectCompanyId', this.myTeam[1].id)
						}
						
						// this.pageData = [...this.tableSlection.values()]
						// this.$stnpmore.commit('set_companyList', res.data)
					}
				})
				
			}
		}
	}
</script>

<style scoped="scoped">
	.menuUl,
	.subordinateMenuUl {
		width: 100%;
	}

	.menuLiTitle {
		width: 100%;
		height: 40px;
		line-height: 40px;
		position: relative;
		padding-left: 30px;
		cursor: pointer;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.el-icon {
		position: absolute;
		/* left: 10px; */
		right: 10px;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 14px;
		height: 14px;
		color: #909090;
		transition: transform .2s;
		transform: rotate(-90deg);
		transform-origin: center;
	}
	.devicon{
		position: absolute;
		left: 10px;
		/* right: 10px; */
		top: 0;
		bottom: 0;
		margin: auto;
		width: 14px;
		height: 14px;
		color: #909090;
	}

	.subordinateMenuUl .subordinateMenuUlLi {
		/* padding-left: 50px; */
		width: 100%;
		line-height: 40px;
		position: relative;
		cursor: pointer;
		color: #333333;
	}

	.subordinateMenuUlLiDiv {
		padding-left: 50px;
	}

	.subordinateMenuUlLiDivChild {
		padding-left: 70px;
	}
	
	.subordinateMenuUl .menuLiTitle {
		padding-left: 50px;
	}

	.subordinateMenuUl .devicon {
		left: 30px;
	}
	.subordinateMenuUlLiDivChild .devicon {
		left: 50px;
	}
	.dubleMenuUl .subordinateMenuUlLi {
		/* padding-left: 20px; */
		color: #808080;
	}

	.isMenuShow {
		transform: rotate(0deg);
	}

	ul li {
		position: relative;
		/* padding-right: 10px; */
	}

	.isSelectLi {
		background: #E5F4E9;
		color: #23B14D;
	}

	.isSelectLi::before {
		content: '';
		position: absolute;
		width: 4px;
		height: 100%;
		background: #23B14D;
		left: 0;
		top: 0;
		bottom: 0;
	}
</style>
